<template>
    <v-scale-screen width="1920" height="1080" :fullScreen="true">
        <!-- 头部区域 -->
        <div class="dp_top">
            <!-- 返回、天气 -->
            <div class="dt_back_weather">
                <img class="dbw_fh" src="../../../assets/largescreen/new/top_back.png" alt="" @click="goBack">
                <div class="dbw_tianqi">
                    <img :src="qihouimg">
                    <div class="tianqi">{{tianqi}} {{wendu}}℃</div>
                </div>
            </div>
            <!-- 类型 -->
            <div class="dt_type dt_type_ykhx selected_left" @click="toTurn(1)"><div>游客画像</div></div>
            <div class="dt_type dt_type_jq" @click="toTurn(2)"><div>景区</div></div>
            <div class="dt_type dt_type_jdms selected_right" @click="toTurn(3)"><div>酒店民宿</div></div>
            <div class="dt_type dt_type_jt" @click="toTurn(4)"><div>交通</div></div>
            <!-- 当前时间 -->
            <div class="dt_time">{{ currentTime }}</div>
            <!-- 中间文字隐藏区域用于点击切换首页 -->
            <div class="dt_click" @click="toTurn(0)"></div>
        </div>
        <!-- 中间区域 -->
        <div class="dp_middle">
            <!-- 中间区域的左边部分 -->
            <div class="dm_left">
                <div class="dp_box">
                    
                </div>

                <div class="box dp_box">
                    <div class="b_title">标题</div>
                    <div class="db_content">
                        <div class="chart">
                            
                        </div>
                    </div>
                </div>

                <div class="box dp_box">
                    <div class="b_title">标题</div>
                    <div class="db_content">
                        <div class="chart"></div>
                    </div>
                </div>
            </div>
            <!-- 中间区域的中间部分 -->
            <div class="dm_center">
                <div class="dmc_map">
                    <div class="dmcm_nums">
                        <div class="dn_pte">
                            <div class="title">今日在岛人数(人)</div>
                            <div class="nums">
                                <div class="n_item" v-for="(num,idx) in onlineIslands" :key="idx">{{ num }}</div>
                            </div>
                        </div>
                        <div class="dn_pte">
                            <div class="title">今日进岛人数(人)</div>
                            <div class="nums">
                                <div class="n_item" v-for="(num,idx) in enterIslands" :key="idx">{{ num }}</div>
                            </div>
                        </div>
                        <div class="dn_pte">
                            <div class="title">今日出岛人数(人)</div>
                            <div class="nums">
                                <div class="n_item" v-for="(num,idx) in leaveIslands" :key="idx">{{ num }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="box c_b_box">
                    <!-- 标题 -->
                    <div class="b_title">标题</div>
                    <div class="db_content">
                        <div class="chart"></div>
                    </div>
                </div>
            </div>
            <!-- 中间区域的右边部分 -->
            <div class="dm_right">
                <div class="box dp_box">
                    <div class="b_title">标题</div>
                    <div class="db_content">
                        <div class="chart">

                        </div>
                    </div>
                </div>
                <div class="box dp_box">
                    <div class="b_title">标题</div>
                    <div class="db_content">
                        <div class="chart">
                            
                        </div>
                    </div>
                </div>
                <div class="box dp_box">
                    <div class="b_title">标题</div>
                    <div class="db_content">
                        <div class="chart"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 中间动态背景地图 -->
        <div class="dp_map"></div>
        <!-- 乡镇地图标记点 -->
        <div class="map_town"
            :class="townIndex===index?'town_active':''"
            :style="town.style"
            v-for="(town,index) in townList"
            :key="index"
            @click="changeTown(town.id,index)"
        >{{ town.name }}</div>
        <!-- 底部区域 -->
        <div class="dp_bottom"></div>
    </v-scale-screen>
</template>
<script>
    var sjTimer,refreshTimer;
    import * as echarts from "echarts";
    import 'echarts-gl';
    import vueSeamlessScroll from 'vue-seamless-scroll'

    export default {
        components: {
            vueSeamlessScroll
        },
        data() {
            return {
                // 头部
                qihouimg: '',   
                tianqi: '',
                wendu: '',
                currentTime:'',
                routerCfg:{
                    0:'/cockpit-home',
                    1:'/cockpit-cockpitjd',
                    2:'/cockpit-cockpitjj',
                    3:'/cockpit-cockpityk',
                    4:'/cockpit-cockpitjt'
                },
                // 中间区域
                onlineIslands:[1,8,4,2],
                enterIslands:[1,8,4,2],
                leaveIslands:[1,8,4,2],
                // 地图岛屿
                myislandId: [],
                townIndex:'',
                townList:[
                    {id:['4164678933'],name:'花鸟乡',style:{'left': '1058px','top': '290px'}},
                    {id:['1721484186251956225','1730426782508650497'],name:'洋山镇',style:{'left': '614px','top': '495px'}},
                    {id:['5554544444'],name:'菜园镇',style:{'left': '820px','top': '462px'}},
                    {id:['5554544444'],name:'五龙乡',style:{'left': '1017px','top': '477px'}},
                    {id:['1346784662'],name:'枸杞乡',style:{'left': '1180px','top': '501px'}},
                    {id:['4545454544'],name:'嵊山镇',style:{'left': '1307px','top': '485px'}},
                    {id:['5645645645'],name:'黄龙乡',style:{'left': '1054px','top': '612px'}}
                ],
            }
        },
        created(){
            this.getWeather();
            this.getCurrentTime();
            sjTimer = setInterval(() => {
                this.getCurrentTime();
            }, 1000);
            this.init();
            refreshTimer = setInterval(() => {
                this.init();
            }, 15000);
        },
        computed: {
            defaultOption () {
                return {
                    step: 0.3, // 数值越大速度滚动越快
                    limitMoveNum: 1, // 开始无缝滚动的数据量
                    hoverStop: true, // 是否开启鼠标悬停stop
                    direction: 1, // 0向下 1向上 2向左 3向右
                    openWatch: true, // 开启数据实时监控刷新dom
                    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                }
            }
        },
        beforeDestroy(){
            clearInterval(sjTimer);
            clearInterval(refreshTimer);
        },
        methods:{
            getWeather(){
                let that=this;
                //加载天气查询插件
                AMap.plugin('AMap.Weather', function() {
                    //创建天气查询实例
                    let weather = new AMap.Weather();
                    //执行实时天气信息查询
                    weather.getLive('嵊泗县', function(err, data) {
                        if (data.info == 'OK') {
                            that.tianqi = data.weather;
                            that.wendu = data.temperature;
                            if (data.weather.indexOf("晴") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/8fff92353a984b2c923429c782e0f0ac.png';
                            } else if (data.weather.indexOf("暴雪") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/b4a84f8e5a7d41d49d69d6a6fcbcac9c.png';
                            } else if (data.weather.indexOf("暴雨") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/c3430daaf25c4315abcc046815f7dca2.png';
                            } else if (data.weather.indexOf("冰雹") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/1f7497a9725740e48e6ef06725680c9f.png';
                            } else if (data.weather.indexOf("大雪") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/8fbbaaf4564b4a5e9f10785bd83cb346.png';
                            } else if (data.weather.indexOf("大雨") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/b731ec5b2a974c1fbfdb2efcc18b9091.png';
                            } else if (data.weather.indexOf("多云") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/5c263447dab4446a980f086636b6cf34.png';
                            } else if (data.weather.indexOf("雷阵雨") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/7d65235177fa4156859fcbef8c057705.png';
                            } else if (data.weather.indexOf("雾") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/1d4ecb857a7e4ba9a00a8c210580955c.png';
                            } else if (data.weather.indexOf("小到中雨") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/0f3ba3c4eb1c4fd7950644473a5321e3.png';
                            } else if (data.weather.indexOf("小雪") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/3c9ccc8c449649c99c0f12b42bf5110d.png';
                            } else if (data.weather.indexOf("雨") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/4cbe88253ffb4f5899ef523c1c4d0b22.png';
                            } else if (data.weather.indexOf("阴") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/5e8e64175e034bdf8303da3acb174b19.png';
                            } else if (data.weather.indexOf("雨夹雪") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/10912cdd39114a9b96a794756a9cdb86.png';
                            } else if (data.weather.indexOf("阵雨@") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/607c0514d2364c2e8363c4886523fb0e.png';
                            } else if (data.weather.indexOf("中到大雨") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/2f2c4e797f884894a9bf3ab9b46663fe.png';
                            } else if (data.weather.indexOf("中雪") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/7166ea1b330845bcb146e87cfd532a9b.png';
                            } else if (data.weather.indexOf("中雨") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/a4e0a114e87a40dd8cffec07ba5ea83f.png';
                            }else if (data.weather.indexOf("霾") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231229/1f68b36db41748d3bf208cb86ce482cf.png';
                            }

                        }
                    });
                });
            },
            getCurrentTime(){
                this.currentTime = new Date().Format('yyyy-MM-dd hh:mm:ss')
            },
            init(){
                
            },
            goBack(){
                this.$router.replace({ path: '/home' })
            },
            toTurn(type){
                if(this.$route.path==this.routerCfg[type]) return
                this.$router.push({ path: this.routerCfg[type] });
            },
            // 获取在岛、进岛、出岛人数
            getIslandUsers(){

            },
            //解决图表鼠标悬浮错位问题
            resizeEcharts(ele) {
                let rate = 1920 / window.innerWidth;
                if ( ele.style ) {
                    ele.style.zoom = 1 * rate;
                    ele.style.transform = `scale(${1 / rate})`;
                    ele.style.transformOrigin = 'top left';
                }
            },
            //切换岛屿
            changeTown(id,index){
                this.townIndex = index;
                if(!id) return
                this.myislandId = id;
                this.init();
                clearInterval(refreshTimer);
                refreshTimer = setInterval(() => {
                    this.init();
                }, 15000);
            }
        }
    }
</script>
<style scoped lang="scss">
    .screen-box{
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        z-index: 9999;
        background-image: url(../../../assets/largescreen/new/bg_zong.png) !important;
        background-size: 100% 100%;

        .screen-wrapper{
            position: relative;
            .dp_map{
                width: 980px;
                height: 980px;
                background-image: url(../../../assets/largescreen/new/m_map_bg.png);
                background-size: 100% 100%;
                position: absolute;
                top: 0;
                left: 50%;
                margin-left: -490px;
            }

            .map_town{
                width: 68px;
                height: 41px;
                background: url('../../../assets//largescreen/town_bg.png');
                position: absolute;
                font-size: 14px;
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
                padding-top: 6px;
                cursor: pointer;
                &.town_active{
                    width: 84px;
                    height: 78px;
                    font-size: 16px;
                    background: url('../../../assets//largescreen/town_active_bg.png');
                    padding-top: 7px;
                    margin-left: -8px;
                    margin-top: -37px;
                }
            }
        }

        .dp_top{
            width: 100%;
            height: 118px;
            background-image: url(../../../assets/largescreen/new/top_title.png);
            background-position: center center;
            background-size: 100% 100%;
            position: relative;

            .dt_back_weather{
                position: absolute;
                top: 18px;
                left: 39px;
                display: flex;
                align-items: center;
                .dbw_fh{
                    width: 102px;
                    height: 38px;
                    cursor: pointer;
                }
                .dbw_tianqi{
                    display: flex;
                    align-items: center;
                    margin-left: 19px;
                    img{
                        width: 24px;
                        height: 22px;
                    }
                    .tianqi{
                        margin-left: 6px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 16px;
                        color: #C6D7F1;
                        line-height: 22px;
                    }
                }
            }

            .dt_type{
                width: 180px;
                height: 48px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-position: center center;
                background-size: 100% 100%;
                position: absolute;
                top: 52px;
                cursor: pointer;
                z-index: 3;
                &>div{
                    font-family: YouSheBiaoTiHei;
                    font-size: 20px;
                    color: #FFFFFF;
                }
                &.selected_left{
                    background-image: url(../../../assets/largescreen//new/top_text_bg_selected_left.png);
                }
                &.selected_right{
                    background-image: url(../../../assets/largescreen//new/top_text_bg_selected_right.png);
                }
            }
            .selected_left,.selected_right{
                &>div{
                    background-image: linear-gradient(to bottom, #FFFFFF 0%, #90DEFF 100%);
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }
            .dt_type_ykhx,.dt_type_jq{
                background-image: url(../../../assets/largescreen//new/top_text_bg1.png);
            }
            .dt_type_jdms,.dt_type_jt{
                background-image: url(../../../assets/largescreen//new/top_text_bg2.png);
            }
            .dt_type_ykhx{
                left: 200px;
            }
            .dt_type_jq{
                left: 380px;
            }
            .dt_type_jdms{
                right: 380px;
            }
            .dt_type_jt{
                right: 200px;
            }

            .dt_time{
                position: absolute;
                top: 26px;
                right: 37px;
                font-family: DS, DS;
                font-size: 20px;
                color: #FFFFFF;
                line-height: 22px;
                text-align: left;
                background-image: linear-gradient(to bottom, #FAFCFF 0%, #44A7FE 100%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            .dt_click{
                width: 670px;
                height: 100%;
                position: absolute;
                top: 0;
                left: 50%;
                margin-left: -335px;
                cursor: pointer;
                z-index: 2;
            }
        }

        .dp_middle{
            width: 100%;
            height: calc(100% - 165px);
            display: flex;
            .dm_left,.dm_right{
                width: 470px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }
            .dm_left{
                padding: 0 24px 0 26px;
            }
            .dm_center{
                width: calc(100% - 940px);
                position: relative;
                .dmc_map{
                    padding: 26px 23px 0;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .dmcm_nums{
                        display: flex;
                        .dn_pte{
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            &:nth-child(2){
                                margin: 0 80px;
                            }
                            .title{
                                font-family: PingFang-SC, PingFang-SC;
                                font-weight: bold;
                                font-size: 16px;
                                color: #C6D7F1;
                                line-height: 22px;
                            }
                            .nums{
                                display: flex;
                                .n_item{
                                    width: 40px;
                                    height: 56px;
                                    line-height: 56px;
                                    text-align: center;
                                    background: url(../../../assets/largescreen/num_bg.png) no-repeat;
                                    background-size: 100% 100%;
                                    margin: 5px 2px 0 2px;
                                    font-size: 30px;
                                    font-family: D-DINExp, D-DINExp;
                                    font-weight: bold;
                                    color: #C6D7F1;
                                    &:first-child{
                                        margin-left: 0;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .dm_right{
                padding: 0 26px 0 24px;
            }
        }

        .dp_bottom{
            width: 100%;
            height: 47px;
            background-image: url(../../../assets/largescreen/new/bg_bottom.png);
            background-position: center center;
            background-size: 100% 100%;
        }

        .box{
            position: relative;
            background: linear-gradient( 180deg, rgba(7,27,67,0.1) 0%, rgba(13,46,89,0.2) 100%), radial-gradient( 82% 15% at 50% 100%, rgba(39,115,255,0.1) 0%, rgba(39,115,255,0) 100%);
            .b_title{
                width: 420px;
                height: 44px;
                background: url("../../../assets/largescreen/y6.png") no-repeat;
                padding-left: 33px;
                line-height: 36px;
                font-size: 20px;
                font-family: YouSheBiaoTiHei;
                color: #FFFFFF;
            }
            &.c_b_box{
                width: 100%;
                height: 300px;
                padding: 0 20px;
                box-sizing: border-box;
                position: absolute;
                bottom: 0;
                left: 0;
            }
        }

        .dp_box{
            width: 420px;
            height: 300px;
            background: linear-gradient( 180deg, rgba(7,27,67,0.1) 0%, rgba(13,46,89,0.2) 100%), radial-gradient( 82% 15% at 50% 100%, rgba(39,115,255,0.1) 0%, rgba(39,115,255,0) 100%);
            position: relative;
        }

        .db_content{
            width: 100%;
            height: calc(100% - 44px);
            .chart{
                width: 100%;
                height: 100%;
                position: relative;
                z-index: 998;
            }
        }
    }
</style>